{% style %}
  {%- assign key = 'default&light&dark&customized' -%}
  {%- assign key_arr = key | split: '&' -%}
  {%- for i in key_arr -%}
    .global-color-{{ i }} .bg-color,
    .global-color-{{ i }}.bg-color {
      {%- assign bg_color_id = 'bg_color_' | append: i -%}
      background-color: {{ settings[bg_color_id] }};
    }
    .global-color-{{ i }} .on-bg-color,
    .global-color-{{ i }}.on-bg-color {
      {%- assign on_bg_color_id = 'on_bg_color_' | append: i -%}
      color: {{ settings[on_bg_color_id] }};
    }
    .global-color-{{ i }} .surface-color {
      {%- assign surface_color_id = 'surface_color_' | append: i -%}
      background-color: {{ settings[surface_color_id] }};
    }
    .global-color-{{ i }} .on-surface-color {
      {%- assign on_surface_color_id = 'on_surface_color_' | append: i -%}
      color: {{ settings[on_surface_color_id] }};
    }
    {%- assign use_on_color_id = 'use_on_color_' | append: i -%}
    {%- if settings[use_on_color_id] -%}
      .global-btn-variable-{{ i }} .btn-primary {
        --se-btn-color: {{ settings[bg_color_id] }};
        --se-btn-bg: {{ settings[on_bg_color_id] }};
        --se-btn-border-color: {{ settings[on_bg_color_id] }};
      }
      .global-btn-variable-{{ i }} .card-wrap .btn-link {
        --se-btn-color: {{ settings[on_surface_color_id] }};
        --se-btn-hover-color: var(--se-primary);
        --se-btn-active-color: var(--se-primary);
      }
    {%- endif -%}
  {%- endfor -%}

{% endstyle %}